<template>
  <section :class="[item.isShowWhitelace == 1 ? 'c-ph24 c-pv30' : '', !isSetPageBackground ? 'c-bg-white' : '']">
    <div
      class="c-p c-text-hidden"
      :class="[[2, 3].includes(modelItem.orderBy) ? 'c-text-hidden c-flex-row c-aligni-center' : '', (sIndex != item.items.length -1) && (item.isShowWhitelace == 1) ? 'c-mb12' : '']"
      v-for="(modelItem, index) in item.items" :key="index" @click="clickNavItem(modelItem)"
    >
      <template v-if="modelItem.orderBy == 2">
        <img :style="item.isShowWhitelace == 1 ? getBorderRadius(borderRadius, '0.4rem'): ''" :class="item.isShowWhitelace == 1 ? 'c-ww288' : 'c-ww312'" :src="$addXossFilter(modelItem.image, require('@/assets/defult270.png'))">
        <div class="c-fs32 c-fw-b c-fc-xblack c-ml24 c-flex-grow1 c-flex-column c-aligni-start">{{modelItem.text}}</div>
      </template>
      <template v-else-if="modelItem.orderBy == 3">
        <div class="c-fs32 c-fw-b c-fc-xblack c-mr24 c-flex-grow1 c-flex-column c-aligni-start">{{modelItem.text}}</div>
        <img :style="item.isShowWhitelace == 1 ? getBorderRadius(borderRadius, '0.4rem'): ''" :class="item.isShowWhitelace == 1 ? 'c-ww288' : 'c-ww312'" :src="$addXossFilter(modelItem.image, require('@/assets/defult270.png'))">
      </template>
      <template v-else-if="(modelItem.orderBy == 1) || (modelItem.orderBy == null) || (modelItem.orderBy == 4)">
        <img :style="item.isShowWhitelace == 1 ? getBorderRadius(borderRadius, '0.4rem'): ''" :src="$addXossFilter(modelItem.image, require('@/assets/defult270.png'))">
        <div class="c-fs32 c-fw-b c-fc-white c-pa word-text c-lh50" :class="[item.items[0].orderBy == 4 ? 'c-w100 c-textAlign-c' : 'c-pl24', modelItem.text.length > 5 ? 'c-hh100' : 'c-hh50']">
          <p>{{modelItem.text.length > 5 ? modelItem.text.substring(0, 5) : modelItem.text}}</p>
          <p v-if="modelItem.text.length > 5">{{modelItem.text.substring(5, modelItem.text.length)}}</p>
        </div>
      </template>
      <template v-else>
        <img class="c-w100" :class="borderRadius" :src="$addXossFilter(modelItem.image, require('@/assets/defult270.png'))" />
      </template>
    </div>
  </section>
</template>
<script>
import { custIndex } from "@/mixin/custIndex.js";
import { customStyle } from '@/utils/customStyle.js'
export default {
  name: 'imgText',
  mixins: [custIndex, customStyle],
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    upgradeMemberJump: {
      type: String,
      default: ''
    },
    pageName: {//首页 INDEX 预览页 PREVIEW_INDEX 微页面 MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
      navMap: global.navMap,
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0
    };
  },
  computed: {
    borderRadius() {
      return this.item.styleParam && this.item.styleParam.borderRadius ? this.item.styleParam.borderRadius : null
    },
  },
  created() {
  },
  methods: {
    // 点击导航
    clickNavItem(data) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      data.pageName = this.pageName;
      data.upgradeMemberJump = this.upgradeMemberJump;
      this.commonModuleRouterPush(data);
    },
  },
};
</script>

<style scoped>
/* 左文右图版式1/4的文字 */
.word-text {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  margin: auto;
  font-family: PingFang SC;
}
</style>